<template>
	<view class="container">
		<view class="containerBg" :style="activeImg">
			<view class="backIcon" @click="back">
				<image src="../../static/home/back.png" mode="widthFix"></image>
			</view>
			<view class="recording" @click="record">
				抽奖记录
			</view>
			<view class="drawPrize">
				剩余抽奖次数:{{userCount}}
			</view>
			<view class="extract">
				<image @click="createOder(5)" src="../../static/home/extract5.png" mode="heightFix"></image>
				<image @click="createOder(1)" src="../../static/home/extract1.png" mode="heightFix"></image>
				<!-- <image @click="createOder(0)" src="../../static/home/tryBtn.png" mode="heightFix"></image> -->
			</view>
		</view>
		<view class="extractInfo">
			<view class="extractCont">
				<view class="extractNav">
					<view :class="item.active==true? 'navItem1':'navItem'" v-for="item in navList" @click="NavItem(item)">{{item.val}}</view>
					
				</view>
				<view class="seckillItem" v-for="item in gashaponList" v-if="activeIndex==0">
					<view class="seckillImg">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="seckillInfo">
						<view class="seckillName">
							<view class="">{{item.name}}</view>
							<view style="color: #D8C725;font-size: 34rpx;font-weight: bold;">{{item.grade}}</view>
						</view>
						<view class="seckillStatus">
							<view class="flex" style="align-items: baseline;">
								<!-- <view class="white" >{{item.type==1?'藏品':item.type==2?'盲盒':'积分'}}</view> -->
								<!-- <view class="" style="color: #fff;">剩{{item.stock}}</view> -->
								<!-- <view class="white">￥{{item.price}}</view> -->
							</view>
						</view>
						
					</view>
				</view>
				<view class="rele" v-if="activeIndex==1">
					<view class="" v-html="ruleCont"></view>
				</view>
			</view>
		</view>
		
		<view>
			<u-popup v-model="isshow" mode="center" @close="close">
				<!-- <view class="prizeTitle">你获得了</view> -->
				<view class="recordCont">
					<view class="recordTit">抽奖记录</view>
					<view class="recordItem" v-for="item in recordList">
						<view class="">{{item.name}}</view>
						<view class="">{{item.create_time}}</view>
					</view>
					<view class="flex mt-20">
						<view class="" @click="previous">上一页</view>
						<view class="">{{page}}</view>
						<view class="" @click="next">下一页</view>
					</view>
				</view>
				<!-- <view class="takeBtn" @click="show=false">立即收下</view> -->
			</u-popup>
		</view>
		<view class="activeImg" v-if="imgShow">
			<image src="../../static/home/niudanji.gif" mode="widthFix"></image>
		</view>
		<view>
			<u-popup v-model="show" mode="center">
				<view class="prizeBox">
					<view class="prizeTitle">你获得了</view>
					<view class="prizeCont">
						<view class="" v-for="item in prizeList" :style="activeStyle">
							<image class="prizeImg" :src="item.image" mode="widthFix" ></image>
							<view class="">{{item.name}}</view>
						</view>
					</view>
					<view class="takeBtn" @click="confirmBtn">确认</view>
				</view>
			</u-popup>
		</view>
	<!-- 	<payment ref="payment" :box-id="58" :box-num="boxNum" :type="type" pay-page="index"
			@create-success="closeNumPopup" @show-result="showResult"></payment> -->
		<!-- <show-result :key="resultKey" ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle"
			:type="type" @close="resultKey++"></show-result> -->
	</view>
</template>

<script>
	// import showResult from "@/components/show-result.vue"
	// import payment from "@/components/payment.vue"
	export default {
		components:{
			// payment,
			// showResult
		},
		data() {
			return {
				gashaponList:[],
				navList:[
					{val:'抽奖内容',active:true,id:0},
					{val:'抽奖规则',active:false,id:1}
				],
				activeIndex:0,
				boxNum: 1,
				type: 0,
				resultKey: 0,
				boxId:'',
				price:'',
				userCount: '',
				raffle_id: '',
				show: false,
				isshow: false,
				imgShow:false,
				prizeList:'',
				activeStyle:'',
				activeImg:'',
				recordList: '',
				page: 1,
				ruleCont:''
			}
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
		
			this.init();
		},
		onLoad() {
			 this.init()
			 
			 
			
		},
		methods: {
			init(){
				this.$http('api/luck_draw/index', {}).then(res => {
					this.price=res[0].price
					this.userCount= res[0].user_count
					this.raffle_id=res[0].raffle_id
					console.log(res[0].goods)
					this.gashaponList=res[0].goods
					this.ruleCont=res[0].content
				});
			},
			close(){
				this.page=1
			},
			previous(){
				if(this.page>1){
					this.page--
					this.record()
				}
				
			},
			next(){
				console.log(this.page)
				this.page++
				this.record()
			},
			confirmBtn(){
				this.show=false
				// this.activeImg={
				// 	'opacity': '1'
				// }
				// this.imgShow=false
			},
			// 抽奖记录
			
			record(){
				this.isshow=true
				this.$http('api/luck_draw/userluckDrawRecordList', {
					raffle_id: this.raffle_id,
					page: this.page
				}, 'GET').then(res => {
					// this.show=true
					console.log(res)
					console.log(res.length)
					if(res.length==0){
						uni.showToast({
							icon:"none",
							title:'暂无更多'
						})
						this.isshow=false
					}else{
						this.recordList = res
					}
					
				});
			},
			//跳转盒柜
			toMyBox() {
				uni.navigateTo({
					url: '/pages/me/myBox'
				})
			},
			//回收
			recycle(prizedata) {
				this.$refs['recycle'].recycle(prizedata.prizeInfo)
				
			},
			showResult(result) {
				//试玩
				if (this.type == 1) {
					this.$refs['result-popup'].open({
						prizeInfo: result.goodsInfo,
						boxImg: this.currBoxImg,
						boxId: '58'
					})
					return
				}
				this.$refs['result-popup'].open({
					...result,
					boxImg: this.currBoxImg,
					boxId: '58'
				})
			},
			// 抽取
			createOder(i){
				if(this.userCount<this.price){
					uni.showToast({
						icon:"none",
						title:'抽奖次数不足'
					})
				}else{
					
					this.$http('api/luck_draw/createOrder', {
						raffle_id: this.raffle_id,
						num:i
					}, 'GET').then(res => {		
						this.$http('api/luck_draw/payOrder', {
							order_id:res.order_id
						}, 'GET').then(res => {
							// this.show=true
							this.prizeList=res.prize
							console.log(this.prizeList.length)
							if(this.prizeList.length==1){
								this.activeStyle= {
									'width': '30%',
								}
							}else{
								this.activeStyle= {
									'width': '30%',
								}
							}
							
							this.activeImg={
								'opacity': '0'
							}
							this.imgShow=true
							setTimeout(()=>{
								this.activeImg={
									'opacity': '1'
								}
								this.imgShow=false
								this.init()
							},2800)
							setTimeout(()=>{
								this.show=true
								
							},3000)
							
						});
					});
					
					
				}
				
				
			},
			closeNumPopup() {
			},
			back(){
				uni.navigateBack()
			},
			NavItem(item){
				for(let i=0;i<this.navList.length;i++){
					this.navList[i].active=false
				}
				item.active=true
				this.activeIndex=item.id
				console.log(this.activeIndex)
			}
		}
	}
</script>

<style scoped lang="less">
.takeBtn{
	width: 60%;
	height: 90rpx;
	line-height: 80rpx;
	border-radius: 45rpx;
	text-align: center;
	margin-top: 40rpx;
	background: linear-gradient(to bottom,#FED636,#F19223);
	position: absolute;
	z-index: 999;
	bottom: 40rpx;
	left: 20%;
	color: #964706;
	border: 6rpx solid #fff;
}
::v-deep  .u-mode-center-box{
	width: 90% !important;
	text-align: center;
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
}
.prizeTitle{
	font-family: cursive;
	font-size: 40rpx;
	font-weight: bold;
}
.prizeBox{
	background: url(../../static/home/record.png) no-repeat;
	background-size: 100% 90%;
	padding: 80rpx;
	position: relative;
}
.recordCont{
	background: url(../../static/home/record.png) no-repeat;
	background-size: 100% 100%;
	padding: 80rpx;
	.recordItem{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.recordTit{
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}
}
.prizeCont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-bottom: 80rpx;
}
.prizeImg{
	width: 100%;
	margin: 40rpx 0 20rpx;
	border-radius: 20rpx;
}
.container{
	width: 100%;
	background-color: #3A1F88;
	position: relative;
	.activeImg{
		position: absolute;
		top: 500rpx;
		width: 100%;
		image{
			width: 100%;
		}
	}
	.containerBg{
		min-height: 1600rpx;
		background: url(../../static/home/gashapon.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		.drawPrize{
			// border: 1rpx solid red;
			text-align: center;
			color: #3F22A9;
			font-weight: bold;
			font-size: 40rpx;
		}
		.recording{
			position: absolute;
			right: 0;
			top: 208rpx;
			writing-mode:vertical-rl;
			background-color: #3F22A9;
			color: #fff;
			padding: 10rpx 14rpx;
			font-size: 26rpx;
			letter-spacing: 2rpx;
			border-radius: 20rpx 0 0 20rpx;
		}
		.backIcon{
			width: 100%;
			height: 100rpx;
			padding: 20rpx;
			box-sizing: border-box;
			image{
				width: 60rpx;
			}
		}
		.extract{
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin: 0 auto;
			position: absolute;
			bottom: 23%;
			image{
				height: 80rpx;
			}
		}
	}
	.extractInfo{
		width: 100%;
		
		margin: 80rpx auto;
		position: relative;
		top: -400rpx;
		.extractCont{
			border-radius: 40rpx;
			width: 94%;
			margin: 40rpx auto;
			background-color: #6020C7;
			.extractNav{
				border-radius: 40rpx 40rpx 0 0;
				width: 100%;
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				overflow: hidden;
				.navItem,.navItem1{
					width: 50%;
					color: #fff;
					text-align: center;
					font-size: 30rpx;
					background-color: #782CF2;
				}
				.navItem1{
					background-color: #6020C7;
				}
				
			}
			.seckillItem{
				height: 160rpx;
				display: flex;
				margin-top: 20rpx;
				padding-right: 10rpx;
				.seckillImg{
					width: 120rpx;
					height: 120rpx;
					margin: 20rpx;
					border-radius: 20rpx;
					// background-color: #E2E2E2;
					display: flex;
					align-items: center;
					image{
						border-radius: 20rpx;
					}
				}
				.seckillInfo{
					flex: 1;
					margin: 20rpx;
					.seckillName{
						width: 100%;
						margin: 14rpx 0;
						font-weight: bold;
						color: #fff;
						display: flex;
						justify-content: space-between;
					}
					.seckillpurchase{
						margin-top: 10rpx;
						color: #fff;
						
					}
				}
			}
			.rele{
				padding: 40rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	
}
</style>
